<template>
  <div class="content-header" :style="{backgroundImage:'url('+$withBase('/index_bg.jpg')+')'}">
    <div class="warp">
      <img class="avatar" :src="$withBase('/avatar.jpg')" alt="avatar">
      <div class="cover_mask">
        欢迎来到我的博客<br/>by:{{ $site.title }}
      </div>
      <div class="border"></div>
    </div>
    <p id="hotNews">{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: "Top",
  data() {
    return {
      content: '_'
    }
  },
  mounted() {
    let content = "永远相信美好的事情即将发生";
    let i = 0;
    setInterval(() => {
      let str = content.substring(0, i);
      i++;
      this.content = str + "_";
      if (i > content.length) i = 0;
    }, 600);
  }
}
</script>

<style lang="stylus" scoped>
.content-header
  position relative;
  width: 100%;
  height: 500px;
  box-sizing: border-box;
  display flex
  flex-direction column
  align-items center
  justify-content center
  background-position top center
  background-repeat no-repeat
  background-size 100% auto;

  .warp
    position: relative;
    width: 150px;
    height: 150px;
    font-size: 15px;
    margin: 20px auto;
    cursor pointer;
    border-radius 50%;
    overflow hidden;

    &:hover
      .cover_mask
        background-color: rgba(0, 0, 0, 0.5);
        color: white;

      .border
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);

    .avatar
      width: 100%;
      height: 100%;
      display block

    .cover_mask
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 50%;
      -webkit-transition: all .5s ease-in;
      transition: all .5s ease-in;
      color: transparent;
      display flex
      align-items center
      justify-content center
      text-align center

    .border
      position: absolute;
      border: 2px solid #072256;
      border-left-color: #E07514;
      border-top-color: #e01008;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      -webkit-transition: all .5s ease-in;
      transition: all .5s ease-in;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;



#hotNews
  font-size 30px
  font-weight: 600;
  line-height: 1.25;
  font-family: PT Serif, Serif;

@media (max-width: $MQMobile)
  .content-header
    height 450px

  #hotNews
    font-size 22px
</style>
